<template>
  <div class="upload">
    <el-upload
      class="upload-demo"
      :multiple="multiple"
      action
      :limit="limit"
      :list-type="listType"
      :before-upload="beforeUpload"
      :before-remove="beforeRemove"
      :file-list="newFileList">
      <el-button size="small" type="primary" v-if="!listType">点击上传</el-button>
      <i class="el-icon-plus" v-else></i>
    </el-upload>
  </div>
</template>

<script>
import { upload } from "@/api/upload";
export default {
  name: "upload",
  props:{
    multiple:{
      type: Boolean,
      default: false
    },
    fileList:{
      type: Array,
      default: ()=>[]
    },
    limit:{
      type: Number,
      default: 9999
    },
    listType:{
      type: String,
      default: ''
    },
  },
  data(){
    return{
      newFileList: []
    }
  },
  mounted() {
    this.fileList.forEach(v=>{
      this.newFileList.push({
        id: v.pitcure_id,
        name: v.pitcure_name,
        url: v.pitcure_url
      })
    })
    this.$emit('Upload',this.newFileList)
  },
  methods:{
    beforeUpload(file){
      upload(file).then(res=>{
        const data = res.data.data
        this.newFileList.push({
          name: data.origin_name,
          url: data.url,
          id: data.id
        })
      })
      this.$emit('Upload',this.newFileList)
    },
    beforeRemove(file) {
      this.newFileList.forEach((v,i)=>{
        if(v.id === file.id){
          this.newFileList.splice(i,1)
        }
      })
      this.$emit('Upload',this.newFileList)
    }
  },
}
</script>

<style scoped>

</style>